<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>账号管理</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <style>
    .icoColor{
      color:#18A689
    }
  </style>
</head>
<body>
  <div id="app" v-cloak v-show="addShow">
      <el-form :model="page" label-width="100px" style="width: 1000px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="查询时间">
                  <el-date-picker
                    v-model="page.timeValue"
                    type="datetimerange"
                    align="center"
                    size="small"
                    style="width:100%;font-size: 12px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']">
                  </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="升级包状态">
                  <el-select v-model="page.status" clearable placeholder="请选择" size="small">
                      <el-option v-for="item in optionInStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button type="primary" size="small" @click="requestModel">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
    <div>
      <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="NewAdd">新增</el-button>
    </div>
    <br>
    <el-table :data="formTable.list" border :max-height="windowHeight" size="small" style="width: 100%" >
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="versionNo" label="版本编号" width=""></el-table-column>
      <el-table-column prop="versionType" label="版本类型"> </el-table-column>
      <el-table-column prop="operator" label="操作人"> </el-table-column>
      <el-table-column prop="status" label="升级状态">
          <!-- <template slot-scope="scope">
              <span class="label-inuse" v-if="scope.row.online">在线</span>
              <span class="label-outuse" v-else>不在线</span>
          </template> -->
      </el-table-column>      
      <el-table-column prop="uploadTime" sortable label="更新时间" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="handleBind(scope.row)">升级设备</el-button>
          <el-button size="mini" type="info" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="page.pageSize"
      :current-page.sync="page.page"
      :total="formTable.totalCount"
      @current-change="handleCurrentChange">
    </el-pagination>
    <!-- dialog NewAdd -->
    <el-dialog :title="dialogTitle" :visible.sync="dialog" width="35%">
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item 
          label="版本号"
          prop="versionNo"
          :rules="[
            { required: true, message: '版本号不能为空'},
          ]"
        >
          <el-input v-model="form.versionNo" size="small"></el-input>
        </el-form-item>
        <el-form-item 
          label="版本类型"
          prop="versionType"
          :rules="[
            { required: true, message: '版本类型不能为空'}
          ]"
        >
          <el-input v-model="form.versionType" size="small"></el-input>
        </el-form-item>
        <el-form-item 
          label="操作人"
          prop="operator"
          :rules="[
            { required: true, message: '操作人不能为空'}
          ]"
        >
          <el-input v-model="form.operator" size="small"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="form.remark" size="small"></el-input>
        </el-form-item>
        <el-form-item 
          label="文件"
          prop="url"
          :rules="[
            { required: true, message: '上传文件不能为空'}
          ]"
        >
          <el-upload
            class="upload-demo"
            :action="action"
            :before-remove="beforeRemove"
            :on-success="onSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            :with-credentials="true"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="newAddSubmit('form')">立即提交</el-button>
          <el-button size="small" @click="dialog = !dialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!----------------- dialog bindDevice ---------------->
    <el-dialog title="升级设备" :visible.sync="dialogDevice"  width="40%">
      <div>
        <el-table :data="deviceData.list" size="small" @selection-change="handleSelectionChange" :row-key="getRowKeys" ref="multipleTable">
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column type="index" ></el-table-column>      
          <el-table-column prop="deviceId" sortable label="设备号"></el-table-column>
          <el-table-column prop="iccid" sortable label="SIM卡号"></el-table-column>
          <el-table-column prop="vin" sortable label="车架号"></el-table-column>
        </el-table>
        <br>
        <el-pagination
          background
          @current-change="vehiclehandleCurrentChange"
          :current-page.sync="formDevice.page"
          :page-size="formDevice.pageSize"
          :total="deviceData.total">
        </el-pagination> 
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogDevice = false">取 消</el-button>
        <el-button size="small" type="primary" @click="bindSubmit" :disabled="multipleSelection.length ? false:true">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        var checkName = function(rule, value, callback){
          if (!value) {
            return callback(new Error('用户名不能为空'));
          }
          setTimeout(function(){
            var test = RE.reName(value);
            if(!test){
              callback(new Error('4到16位（字母，数字，下划线）且连续重复不能超过三个'));
            }else{
              callback();
            }
          }, 500);
        };
        return { 
          addShow:false,
          dialog:false,
          dialogDevice:false,
          deviceData:[],//绑定设备数据
          formDevice: {//绑定设备分页
            page:1,
            pageSize:15,
          },
          multipleSelection:[],//升级设备==CheckBox
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 270,
          dialogTitle:'',
          form: {},
          page:{
            page:1,
            pageSize:15
          },
          formTable:[],
          fileList:[],
          action:apiUrl.wangtao + "/version/uploadVersionFile",
          optionInStatus:[{
            label:"未发布",
            value:"0",
          },{
            label:"已发布",
            value:"1",
          },{
            label:"已失效",
            value:"3",
          },]
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.addShow = true
      },
      methods: {
          NewAdd:function(){//新增
            this.dialog = true
            this.dialogTitle = "新增版本"
            this.form = {}
            this.fileList=[]
          },
          newAddSubmit:function(formName){//新增提交--更新提交  
            var data = this.form;     
            var _this = this;
            this.$refs[formName].validate((valid) => {
              if (valid) {
                if(data.uid){
                  resourceRequst("/version/updateVersionInfo",data,function(res){
                    _this.$message.success(res.msg)
                    _this.dialog = false
                    _this.requestModel()
                  })
                }else{
                  resourceRequst("/version/addVersionInfo",data,function(res){
                    _this.$message.success("新增成功！")
                    _this.dialog = false
                    _this.requestModel()
                  })
                }
              } else {
                return false;
              }
            });
            
          },
          handleEdit:function(index, row) {//编辑
            console.log(row)
            this.fileList=[]
            this.form = JSON.parse(JSON.stringify(row));
            this.dialog = true;
            this.dialogTitle = "编辑版本"
            // 
          },
          handleDelete:function(index, row) {//删除
            var confirm = window.confirm("确认删除该版本么？")
            if (confirm == false) return
            // this.$loading({ background: 'rgba(0, 0, 0, 0.6)' });
            // this.$http.delete(apiUrl.zhangong+'/delete/'+row.uid,{},{
            //   withCredentials: true,
            // })
            // .then(function(response){
            //   if(response.body.status){
            //     vm.$message.success(response.body.info);
            //     vm.formTable.versions.splice(index,1)
            //   }else{
            //     alert(response.body.info)
            //   }
            //   vm.$loading({ background: 'rgba(0, 0, 0, 0.6)' }).close();
            // },function(response){
            //   alert(response.body)
            // })
          },
          handleCurrentChange:function(val) {//分页
            // this.page.page = val
            this.requestModel()
          },
          requestModel:function(){//请求列表
            var _this = this;
            var time = {
              startTime:"",
              endTime:"",
            }
            if(this.page.timeValue && this.page.timeValue.length){
              time.startTime = this.page.timeValue[0]
              time.endTime = this.page.timeValue[1]
            }
            var data = {
              page:this.page.page - 1,
              pageSize:this.page.pageSize,
              status:this.page.status,
              startTime:time.startTime,
              endTime:time.endTime
            }
            resourceRequst("/version/queryVersionInfoListByPage",data,function(res){
              _this.formTable = res
            })
          },
          /**
           * tbox文件上传
           *  
          **/         
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次已选择了 ${files.length} 个文件！`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },  
          onSuccess(response,file, fileList) {
            if(response.code=="000000"){
              this.form.url = response.fileUrl
            }else{
              this.$message.warning(response.msg);
              return
            }
          },
          /**
          * 升级设备
          **/
          handleBind:function(row){
            this.formDevice.page = 1;
            this.versionUid = row.uid;
            if(this.$refs.multipleTable){
              this.$refs.multipleTable.clearSelection();
            }
            this.vehicleRequestModel()
          },
          vehiclehandleCurrentChange:function(val) {//分页--发生变化
            this.vehicleRequestModel()
          },
          vehicleRequestModel:function(){//设备 request
            var _this = this
            var data = {
              page:this.formDevice.page,
              pageSize:this.formDevice.pageSize
            }
            resourceRequst("/device/queryObdDeviceList",data,function(res){
              _this.deviceData = res;
              _this.deviceData.total = res.pagination.total;
              _this.dialogDevice = true;
            },true)
          },
          getRowKeys(row) {
              return row.id;
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
          bindSubmit:function(){
            var _this = this;
            var deviceList = this.multipleSelection.map(function(item){
              return item.vin
            })
            var data = {
              versionUid:this.versionUid,
              deviceList:deviceList
            }
            resourceRequst("/version/applyVersionFile",data,function(res){
              if(res.updateDeviceList.length){

              }else{
                _this.$message.warning('暂无可升级设备！')
              }
            })
          }
      }
    })
  </script>
</html>